<template>
  <div class="mywork">
    <div>
      <div class="myworkBtn">
        <el-button-group>
          <el-button type="primary" @click="go('/work/add')">创建事务</el-button>
          <el-button type="primary" @click="go('/main')">返回主页</el-button>
        </el-button-group>
      </div>
    </div>
    <div class="myworkMain">
      <el-tabs type="border-card">

        <el-tab-pane label="我发起的">
          <section class="a">
            <section class="b">
              <section class="c">
                <section class="d">
                  <br>
                </section>
              </section>
            </section>
            <section class="e">
              <br>
            </section>
          </section>
          <section class="f">
            <div>
              <section class="g" style="width:94%;text-align: center">
                <section class="col-12" style="text-align: center">
                </section>
                <div v-for="(item,i) in workinfobf" style="width:95%">
                  <el-descriptions class="margin-top" :column="2" border>
                    <template slot="extra">
                      <br>
                    </template>
                    <el-descriptions-item>
                      <template slot="label" :contentStyle="{'width': '25%'}">
                        事务名
                      </template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle="{'width': '25%'}">
                      <template slot="label">
                        操作
                      </template>
                      <el-button-group>
                        <el-button type="primary" size="mini" @click="go('/work/paper?id='+item.id)">打开</el-button>
                        <el-button type="danger" size="mini" @click="del(item.id,i)">删除</el-button>
                      </el-button-group>
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle="{'width': '25%'}">
                      <template slot="label">
                        开始时间
                      </template>
                      {{item.start}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle="{'width': '25%'}">
                      <template slot="label">
                        结束时间
                      </template>
                      {{item.end}}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </section>
              <section class="j" data-width="95%">
              </section>
            </div>
          </section>
        </el-tab-pane>
        <el-tab-pane label="我收到的">
          <section class="a">
            <section class="b">
              <section class="c">
                <section class="d">
                  <br>
                </section>
              </section>
            </section>
            <section class="e">
              <br>
            </section>
          </section>
          <section class="f">
            <div>
              <section class="g" style="width:94%;text-align: center">
                <section class="col-12" style="text-align: center">

                </section>
                <div v-for="(item,i) in workdoinfobf" style="width:95%">
                  <el-descriptions class="margin-top" :column="2" border>
                    <template slot="extra">
                      <br>
                    </template>
                    <el-descriptions-item>
                      <template slot="label" :contentStyle="{'width': '25%'}">
                        事务名
                      </template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle="{'width': '25%'}">
                      <template slot="label">
                        操作
                      </template>
                      <el-button-group>
                        <el-button type="primary" size="mini" @click="go('/work/paper?id='+item.id)">打开</el-button>
                      </el-button-group>
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle="{'width': '25%'}">
                      <template slot="label">
                        开始时间
                      </template>
                      {{item.start}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle="{'width': '25%'}">
                      <template slot="label">
                        结束时间
                      </template>
                      {{item.end}}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </section>
              <section class="j" data-width="95%">
              </section>

            </div>
          </section>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import workApi from "../../api/work.js"
  export default {
    data() {
      return {
        workinfobf: [],
        workdoinfobf: []
      }
    },
    methods: {
      go(path) {
        this.$router.push(path)
      },
      del(workid, i) {
        workApi.delMyWork(workid).then((res) => {
          if (res.affectedRows >= 0) {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            });
            this.workinfobf.splice(i, 1)
          }
        })
      }
    },
    created() {
      workApi.getMyWork().then((res) => {
        this.workinfobf = res.sort((work1, work2) => {
          return (work2.id - work1.id)
        })
      })
      workApi.getMyDoWork().then((res) => {
        this.workdoinfobf = res.sort((work1, work2) => {
          return (work2.id - work1.id)
        })
      })
    }
  }
</script>

<style scoped>
  .mywork {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin-top: 20px;
  }

  .myworkBtn {
    position: fixed;
  }

  .myworkMain {
    width: 45%;
  }

  @media (max-width:680px) {
    .myworkMain {
      width: 99%;
      margin-top: 50px;
    }

    .mywork {
      flex-direction: column;
    }

    .el-button--mini {
      /* padding: 7px 5px; */
    }
  }

  .a {
    margin-bottom: -2em;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  .b {
    text-align: center;
    margin-bottom: -15px;
  }

  .c {
    display: inline-block;
    background: #86b6fc;
    color: #fff;
    border-radius: 15px;
  }

  .d {
    padding: 4px 1.2em 0px 1.2em;
  }

  .e {
    width: 55%;
    height: 1.2em;
    background: #86b6fc;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    margin: 0px auto;
  }

  .f {
    width: 92%;
    margin: 20px auto;
    box-shadow: 0px 0px 15px #7cbdf8;
    border-radius: 15px;
    padding: 0em;
    background: rgb(254, 254, 254);
  }

  .g {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5em 1em;
    flex-direction: column;
  }

  .h {
    width: 12px;
    height: 12px;
    background: #a3c8ff;
    border-radius: 3px;
  }

  .i {
    font-size: 14px;
    margin-left: 2em;
  }

  .j {
    width: 95%;
    margin: 0px auto;
    border-bottom: 1px solid #e5e5e5;
  }
</style>
